<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2021-11-24 11:25:50
 * 模块背景解析，每个自定义组件都需包裹在本组件中
-->
<template>
  <div class="moduleContainer" :style="style">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "ModuleContainer",
  props: {
    moduleBase: {
      type: Object,
      required: true,
      default: {},
    }
  },
  computed: {
    style() {
      const { bgType, bgStyle, bgColor, bgImg, marginTop, fullWidth, radius } = this.moduleBase
      let result = {};
      if (bgType == 1) {
        result.backgroundColor = bgColor
      } else if (bgType == 2) {
        result.background = 'none'
      } else if (bgType == 3) {
        if (bgStyle == 1) {
          result.backgroundColor = bgColor
        } else if (bgStyle == 2 && bgImg != "") {
          result.background = `background:url(${bgImg}) no-repeat center;background-size:cover;`
        }
      }
      if (marginTop) {
        result.marginTop = '10px'
      }
      if (fullWidth != undefined && !fullWidth) {
        result.marginLeft = '10px'
        result.marginRight = '10px'
      }
      if (radius !== false && radius !== undefined) {
        result.borderRadius = radius + 'px'
      }
      return result;
    }
  }
};
</script>

<style scoped>
.moduleContainer {
  overflow: hidden;
}
</style>
